<template>
  <div class="login_bj">
    <div class="login_box">
      <h2 style="margin-bottom: 12px;">欢 迎 登 陆</h2>
      <div class="login_form">
        <el-form :model="userForm" :rules="rules" label-width="90px">
          <el-form-item label="账号" prop="userName" style="width: 500px;">
            <el-input prefix-icon="el-icon-user" type="text" placeholder="请输入账号" v-model="userForm.userName"
              clearable></el-input>
          </el-form-item>
          <el-form-item label="密码" prop="userPwd" style="width: 500px;">
            <el-input prefix-icon="el-icon-lock" type="password" placeholder="请输入密码" v-model="userForm.userPwd"
              clearable></el-input>
          </el-form-item>
          <el-form-item style="margin-left: 230px;">
            <el-radio v-model="role" label="1" size="medium">用户</el-radio>
            <el-radio v-model="role" label="2" size="medium">管理员</el-radio>
          </el-form-item>

          <el-form-item>
            <el-button v-if="loginLoading" @click="loginEvent" :loading="loginLoading" type="primary"
              style="width: 100px; margin-left: 40px">登陆中...</el-button>
            <el-button v-else @click="loginEvent" type="primary" style="width: 100px;margin-right: 40px;">登陆</el-button>
            <el-button @click="registerEvent" type="primary" style="width: 100px; margin-right: 50px;">注册</el-button>
          </el-form-item>
        </el-form>
      </div>
      <div style="margin-top: 190px;">
        <Footer></Footer>
      </div>

    </div>

    <el-dialog title="用户注册" :visible.sync="dialogFormVisible">
      <el-form :model="userRegisterForm" :rules="registerRules" label-width="80px">
        <el-form-item label="用户名" prop="userName">
          <el-input clearable type="text" v-model="userRegisterForm.userName"></el-input>
        </el-form-item>
        <el-form-item label="密码" prop="userPwd">
          <el-input clearable type="password" v-model="userRegisterForm.userPwd"></el-input>
        </el-form-item>
        <el-form-item label="电话号码" prop="phone">
          <el-input clearable v-model="userRegisterForm.phone"></el-input>
        </el-form-item>
        <el-form-item label="活动区域" prop="sex" >
          <el-select clearable v-model="userRegisterForm.sex" placeholder="请选择性别" style="width: 100%">
            <el-option label="女" value="0"></el-option>
            <el-option label="男" value="1"></el-option>
          </el-select>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取 消</el-button>
        <el-button :loading="registerLoading" type="primary" @click="registerSubmit">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { login } from "@/api/admin/common";
import { UserLogin, registerUser } from "@/api/front/common";
import Footer from '@/components/Footer.vue'
import { message, messageType } from "@/utils/message";
export default {
  name: "login",
  components: {
    Footer,
  },
  data() {
    return {
      role: "1",
      userForm: {
        userName: "",
        userPwd: "",
      },
      userRegisterForm: {
        userName: "",
        userPwd: "",
        phone: "",
        sex:"",
      },
      rules: {
        userName: [
          { required: true, message: "请输入用户名", trigger: "blur" },
        ],
        userPwd: [{ required: true, message: "请输入密码", trigger: "blur" }],
      },
      registerRules: {
        userName: [
          { required: true, message: "请输入用户名", trigger: "blur" },
        ],
        userPwd: [{ required: true, message: "请输入密码", trigger: "blur" }],
        phone: [
          { required: true, message: "请输入电话号码", trigger: "blur" },
          { validator: this.isMobileNumber,message: "请输入正确的手机号码", trigger: "blur" }
        ],
        sex: [{ required: true, message: "请选择性别", trigger: "blur" }],
      },
      loginLoading: false,
      registerLoading: false,
      dialogFormVisible:false,
    };
  },
  methods: {
    async loginEvent() {
      this.loginLoading = true;
      if (this.role === '1') {
        await UserLogin(this.userForm)
          .then((response) => {
            const data = response.data;
            console.log(data);
            if (data.code === 0) {
              localStorage.setItem("edb-authorization-token", data.data.token);
              localStorage.setItem("user", JSON.stringify(data.data));
              this.$router.push("/front/home");
              message(messageType().success, '登陆成功');
              return;
            }
            message(messageType().error, data.msg);
          })
          .catch((error) => {
            console.log(error);
          });
      } else {
        await login(this.userForm)
          .then((response) => {
            const data = response.data;
            console.log(data);

            if (data.code === 0) {
              localStorage.setItem("edb-authorization-token", data.data.token);
              localStorage.setItem("admin", JSON.stringify(data.data));
              this.$router.push("/");
              message(messageType().success, '登陆成功');
              return;
            }
            message(messageType().error, data.msg);
          })
          .catch((error) => {
            console.log(error);
          });
      }
      this.loginLoading = false;
    },

    registerEvent() {
      this.dialogFormVisible = true;
    },

    async registerSubmit() {
      this.registerLoading = true;
     await registerUser(this.userRegisterForm).then(resp => {
        if (!resp) return;
        setTimeout(() => {
          message(messageType().success, '注册成功，请登录');
          this.dialogFormVisible = false;
        }, 500);
        console.log(resp);
      }, error => {
        console.log(error);
      })
      this.registerLoading = false;
    },

    isMobileNumber (rule, value, callback) {
      if (!value) {
        return new Error("请输入电话号码");
      } else {
        const reg = /^(1\d{10})$/;
        const isPhone = reg.test(value);
        value = Number(value); //转换为数字
        if (typeof value === "number" && !isNaN(value)) {//判断是否为数字
          value = value.toString(); //转换成字符串
          if (value.length < 0 || value.length > 12 || !isPhone) { //判断是否为11位手机号
            callback(new Error("手机号码格式如:138xxxx8754"));
          } else {
            callback();
          }
        } else {
          callback(new Error("请输入电话号码"));
        }
      }
    },
  },
};
</script>

<style lang="scss">
.login_bj {
  width: 100%;
  height: 100%;
  position: fixed;
  top: 0;
  left: 0;
  min-width: 1000px;
  background-image: url(../../assets/loginBj1.jpg);
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center 0;

  .login_box {
    width: 550px;
    height: 370px;
    background-color: #fff;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    border-radius: 10px;
    box-shadow: 0 0 13px #fff;
    text-align: center;

    h2 {
      margin-top: 50px;
    }

    .login_form {
      margin: 0 auto;
      margin-right: 20px;
    }

  }
}
</style>